<template>
  <div>
    <div v-if="flieShow.wordShow" class="docWrap">
      <div ref="file"></div>
      <div
        v-if="fileList != null && fileList.length > 1"
        style="margin-bottom: 15px; text-align: right"
      >
        <el-button type="primary" size="small" @click.stop="previousPart">
          上一份
        </el-button>
        <el-button type="primary" size="small" @click.stop="nextPart">
          下一份
        </el-button>
      </div>
    </div>
    <div v-if="flieShow.imgShow" :style="imgStyle">
      <el-image
        v-for="url in imgPreview.list"
        :key="url"
        :src="url"
        lazy
      ></el-image>
    </div>

    <div v-if="flieShow.pdfShow">
      <div style="margin-bottom: 15px; text-align: right">
        <el-button type="primary" size="small" @click.stop="previousPage">
          上一页
        </el-button>
        <el-button type="primary" size="small" @click.stop="nextPage">
          下一页
        </el-button>
        <span
          >当前第{{ pdfPreciew.pdfPage }}页 / 共{{
            pdfPreciew.pageCount
          }}页</span
        >
      </div>

      <div>
        <pdf
          :src="pdfPreciew.src"
          :page="pdfPreciew.pdfPage"
          style="display: inline-block; width: 100%"
          @num-pages="pdfPreciew.pageCount = $event"
          @page-loaded="pdfPreciew.pdfPage = $event"
        ></pdf>
      </div>
    </div>

    <div v-if="flieShow.excelShow">
      <VueOfficeExcel :src="excel" style="height: 800px; width: 1500px" />
    </div>

    <div v-if="flieShow.otherShow">目前只支持图片、word、pdf预览</div>
  </div>
</template>
<script>
// 引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
// // 引入相关样式
import "@vue-office/excel/lib/index.css";
import { mapGetters } from "vuex";
import { GetFileInfoUrl, LocalFile } from "@/api/Base";
import pdf from "vue-pdf";
// 引入axios用来发请求
import axios from "axios";
import { getToken } from "@/utils/auth";
// 引入docx-preview插件
const docx = require("docx-preview");
export default {
  name: "PreviewFileContent",
  components: {
    pdf,
    VueOfficeExcel,
  },
  props: {
    file: { type: Object, default: () => ({}) }, // 传递的参数
    fileList: { type: Array, default: () => [] }, // 传递的参数
  },
  data() {
    return {
      excel: "",
      imgStyle: "",
      flieShow: {
        wordShow: false,
        pdfShow: false,
        imgShow: false,
        otherShow: false,
        excelShow: false,
      },
      pdfPreciew: {
        viewVisible: true,
        src: null,
        pdfPage: 1,
        pageCount: 0,
      },
      imgPreview: {
        show: true,
        list: [""],
      },

      wordPreciew: {
        fileName: "",
        downloadUrl: "",
      },
      wordIndex: 0,
    };
  },
  computed: {
    ...mapGetters(["fileDomain", "fileBucket"]),
  },
  created() {
    if (this.file.storageFileName !== "") {
      var fileType = this.file.storageFileName.split(".")[1].toLowerCase();
      fileType = fileType.toLowerCase();
      console.log(fileType);
      if (fileType === "doc" || fileType === "docx") {
        this.flieShow.wordShow = true;
        this.flieShow.pdfShow = false;
        this.flieShow.imgShow = false;
        this.flieShow.otherShow = false;
        this.flieShow.excelShow = false;
      } else if (fileType === "pdf") {
        this.flieShow.wordShow = false;
        this.flieShow.pdfShow = true;
        this.flieShow.imgShow = false;
        this.flieShow.excelShow = false;
        this.flieShow.otherShow = false;
      } else if (
        fileType === "jpg" ||
        fileType === "png" ||
        fileType === "bmp"
      ) {
        this.flieShow.wordShow = false;
        this.flieShow.pdfShow = false;
        this.flieShow.imgShow = true;
        this.flieShow.excelShow = false;
        this.flieShow.otherShow = false;
      } else if (fileType === "xls" || fileType === "xlsx") {
        this.flieShow.wordShow = false;
        this.flieShow.pdfShow = false;
        this.flieShow.imgShow = false;
        this.flieShow.excelShow = true;
        this.flieShow.otherShow = false;
      } else {
        this.flieShow.wordShow = false;
        this.flieShow.pdfShow = false;
        this.flieShow.imgShow = false;
        this.flieShow.otherShow = true;
        this.flieShow.excelShow = false;
        this.$message.warning("目前只支持图片、word、pdf预览");
        return;
      }
      if (this.file.type === "img") {
        this.flieShow.wordShow = false;
        this.flieShow.pdfShow = false;
        this.flieShow.imgShow = true;
        this.flieShow.otherShow = false;
        this.flieShow.excelShow = false;
      }
    }
    // 处理数据源
    if (this.flieShow.excelShow) {
      this.previewExcel();
    }
    if (this.flieShow.wordShow) {
      if (this.fileList !== null && this.fileList.length !== 0) {
        this.wordPreviewList();
      } else {
        this.wordPreview();
      }
    }
    if (this.flieShow.imgShow) {
      this.imgPreview.show = this.flieShow.imgShow;
      this.imgPreview.list = [];
      var arr = this.file.storageFileName.split(".")[1].toLowerCase();
      if (arr === "doc" || arr === "docx") {
        this.imgStyle =
          "vertical-align: middle; text-align: center;background-color: gray;";
      } else {
        this.imgStyle = "vertical-align: middle; text-align: center;";
      }
      if (
        this.file.urlList !== undefined &&
        this.file.urlList !== null &&
        this.file.urlList.length !== 0
      ) {
        for (let i = 0; i < this.file.urlList.length; i++) {
          this.imgPreview.list.push(this.file.urlList[i]);
        }
      } else {
        this.Base.GetStaticImgInfo(this.file.url).then((res) => {
          this.imgPreview.list.push(res.data);
        });
      }
    }
    if (this.flieShow.pdfShow) {
      this.previewPDF();
    }
  },
  methods: {
    previewExcel() {
      var url = GetFileInfoUrl(this.file.url);
      axios({
        method: "get",
        responseType: "blob", // 因为是流文件，所以要指定blob类型
        url: url,
        headers: { Authorization: getToken() },
      }).then(({ data }) => {
        this.excel = data;
      });
    },
    // 上一份报告
    previousPart() {
      if (this.wordIndex > 0) {
        this.wordIndex = this.wordIndex - 1;

        this.wordPreviewList();
      }
    },
    // 下一份报告
    nextPart() {
      if (this.wordIndex < this.fileList.length - 1) {
        this.wordIndex = this.wordIndex + 1;
        this.wordPreviewList();
      }
    },
    // PDF预览
    previewPDF() {
      var url = GetFileInfoUrl(this.file.url);
      axios({
        method: "get",
        responseType: "blob", // 因为是流文件，所以要指定blob类型
        url: url,
        headers: { Authorization: getToken() },
      }).then(({ data }) => {
        this.pdfPreciew.src = URL.createObjectURL(data);
      });
    },
    // 关闭窗口初始化PDF页码
    closeDialog() {
      this.pdfPreciew.pdfPage = 1;
    },

    // PDF改变页数
    previousPage() {
      var p = this.pdfPreciew.pdfPage;
      p = p > 1 ? p - 1 : this.pdfPreciew.pageCount;
      this.pdfPreciew.pdfPage = p;
    },
    nextPage() {
      var p = this.pdfPreciew.pdfPage;
      p = p < this.pdfPreciew.pageCount ? p + 1 : 1;
      this.pdfPreciew.pdfPage = p;
    },
    wordPreviewList() {
      var url = GetFileInfoUrl(this.fileList[this.wordIndex].url);
      axios({
        method: "get",
        responseType: "blob", // 因为是流文件，所以要指定blob类型
        url: url, // 自己的服务器，提供的一个word下载文件接口
        headers: { Authorization: getToken() },
      }).then(({ data }) => {
        docx.renderAsync(data, this.$refs.file); // 渲染到页面
      });
    },
    // 预览
    wordPreview() {
      // localFileState没存在服务器的文件
      if (this.file.localFileState) {
        LocalFile({
          path: this.file.url,
          fileName: this.file.storageFileName,
        }).then((res) => {
          docx.renderAsync(res.data, this.$refs.file);
        });
      } else {
        var url = GetFileInfoUrl(this.file.url);
        axios({
          method: "get",
          responseType: "blob",
          url: url,
          headers: { Authorization: getToken() },
        }).then(({ data }) => {
          docx.renderAsync(data, this.$refs.file); // 渲染到页面
        });
      }
    },
    // 下载
    downLoad() {
      var url = GetFileInfoUrl(this.file.url);
      axios({
        method: "get",
        responseType: "blob", // 因为是流文件，所以要指定blob类型
        url: url,
        headers: { Authorization: getToken() },
      }).then(({ data }) => {
        // 后端返回的是流文件
        const blob = new Blob([data]); // 把得到的结果用流对象转一下
        var a = document.createElement("a"); // 创建一个<a></a>标签
        a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
        a.download = "123.docx"; // 设置文件名
        a.style.display = "none"; // 障眼法藏起来a标签
        document.body.appendChild(a); // 将a标签追加到文档对象中
        a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
        a.remove(); // 一次性的，用完就删除a标签
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.docWrap {
  // 指定样式宽度
  width: 1500;
  overflow-x: auto;
}
</style>
